import React, { Component } from 'react'
import ProvideAuth from './authContext'
import AuthButton from './AuthButton'
import PrivateRoute from './PrivateRoute'

import {
  Link,
  Switch,
  Route
} from 'react-router-dom'

import PublicPage from './PublicPage'
import ProtectedPage from './ProtectedPage'
import LoginPage from './Login'

export default class Index extends Component {
  render() {
    return (
      <ProvideAuth>
        <div>
          <AuthButton />
          <ul>
            <li>
              <Link to="/public">Public Page</Link>
            </li>
            <li>
              <Link to="/protected">Protected Page</Link>
            </li>
          </ul>

          <Switch>
            <Route path="/public">
              <PublicPage />
            </Route>
            <Route path="/login">
              <LoginPage />
            </Route>
            <PrivateRoute path="/protected">
              <ProtectedPage />
            </PrivateRoute>
          </Switch>
        </div>
      </ProvideAuth>
    )
  }
}
